// 在首页（App.jsx）引入此页面    才可以加载
import { useState } from 'react'
import { useEffect } from "react";
import axios from 'axios';
function Home() {
    // 初始化为0
    let [num, setNum] = useState(0)
    let [name, setName] = useState('张三')
    //useEffect 类似于 类组件中 ComponentDidMount(渲染后) ComponentDidUpdate（更新后）
    // 参数1 执行回调函数 参数二 依赖项 ：若为空数组 则不依赖任何属性 有且只执行一次，若不是空数组，则该依赖项发生改变时就会再次触发,若不传， 若第二个参数不传 则只要是状态改变 就会执行
    useEffect(() => {
        console.log('执行了');
        axios.get(`https://apif.java.crmeb.net/api/front/index`).then(res => {
            console.log(res);
        })
        // setInterval(()=>{
        //     setNum(num+1)
        // },1000)
        window.onresize = () => {
            console.log('窗口变了')
        }
        // 副作用函数可以有return值 但return值必须为一个函数 当组件销毁时触发这个函数
        return () => {
            // 当组件销毁时 执行 
            console.log('组件销毁啦');
            window.onresize = null
        }
        // 空数组 [ ]  初始化只执行一次 不会重复渲染 ,
    }, [num, name])
    return (
        <div>
            <h2>useEffect 副作用--hooks--{num}</h2>
            <button onClick={() => { setNum(num + 1) }}>++</button>
            <button onClick={() => {
                setName('李四')
            }}>改变</button>
        </div>
    )
}

export default Home;